<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.css">
 <style type="text/css">
  td{
    white-space:nowrap;
    overflow:hidden;
    word-break:keep-all;
   }

</style>
  <div class="card">
    <div class="card-header"><h4>资料信息</h4></div>
    <div class="card-body">
        <div class='row'>
          <div class="controls col-sm-2">
            <select class="form-control" id='fl'>
              <option value=''>类别</option>
              <option value='10'>人物</option>
              <option value='20'>建筑</option>
              <option value='30'>艺术</option>
            </select>
          </div>
          <div class="controls col-sm-2">
            <select class="form-control" id='spjg'>
              <option value=''>资料审核</option>
              <option value='00'>未审核</option>
              <option value='01'>通过</option>
              <option value='02'>退回</option>
            </select>
          </div>
          <div class="form-group col-sm-3">
            <input class="form-control" type="date" id="rqq" name="rqq" placeholder="日期起" >
          </div>
          <div class="form-group col-sm-3">
            <input class="form-control" type="date" id="rqz" name="rqz" placeholder="日期止" >
          </div>
          <div class="form-group col-sm-2">
            <button class="btn btn-info btn-w-md" type="button" id='query_data'>查   询</button>
          </div>
   
        </div>

        <div class="row">

              <div class="modal fade" id="zlgxModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
                    <div class="modal-dialog" role="document">
                      <div class="modal-content">
                        <div class="modal-header">
                          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                          <h4 class="modal-title" id="exampleModalLabel">内容审核</h4>
                        </div>
                        <div class="modal-body">
                          <div id="modal_img" align="center"></div>
                          <div id="modal_xxxx" style="font-size:larger;font-family: \96B6\4E66;"></div>
                          <hr>
                          <h4>摘要</h4>
                          <div id="modal_intro" style="font-size:larger;font-family: \96B6\4E66;"></div>
                        </div>
                        <div class="modal-footer">
                          <div class="row">
                            <div class="card">
                              <div class="card-header"><h4>资料审核</h4></div>
                              <div class="card-body">
                                  <div class="form-group">
                                     <input type="text" class="form-control input-xlarge" id="djbh" readonly="readonly">
                                  </div>

                                  <div class="form-group">
                                     <label class="radio-inline">
                                          <input type="radio" name="optionsRadiosinline" value="Y" checked> 通过
                                      </label>
                                      <label class="radio-inline">
                                          <input type="radio" name="optionsRadiosinline" value="N"> 退回
                                      </label>
                                  </div>
                                  <div class="form-group">
                                      <textarea class="form-control" id="txt_spyj"  rows="3" placeholder="意见.."></textarea>
                                  </div>
                                
                              </div>
                            </div>
                          </div>
                          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                          <button type="button" class="btn btn-primary" id='btn_update'>提交保存</button>
                        </div>
                      </div>
                    </div>
                  </div>
        <div class="col-sm-12">
              
          <div style="height:600px;overflow:auto">
            <table class ='table-striped' id="table"></table>
          </div>
        </div>


    </div>
  </div>
  </div>
  


 <script src="static/js/bootstrap-table.min.js"></script>
 <script src="static/js/bootstrap-table-zh-CN.min.js"></script>

<script type="text/javascript">
   $(document).ready(function() {
                    // 初始化表格
                 let xxid='';
                 initTable();
                });

                function initTable() {
                        var t = $("#table").bootstrapTable({
                        url: '/gl_zlgxsh',
                        method: 'get',
                        dataType: "json",
                        striped: true,//设置为 true 会有隔行变色效果
                        undefinedText: "空",//当数据为 undefined 时显示的字符
                        pagination: true, //分页
                //      paginationLoop:true,//设置为 true 启用分页条无限循环的功能。
                //      showToggle: "true",//是否显示 切换试图（table/card）按钮
                //      showColumns: "true",//是否显示 内容列下拉框
                        pageNumber: 1,//如果设置了分页，首页页码
                //      showPaginationSwitch:true,//是否显示 数据条数选择框
                        pageSize: 10,//如果设置了分页，页面数据条数
                        pageList: [5, 10, 20, 40],  //如果设置了分页，设置可供选择的页面数据条数。设置为All 则显示所有记录。
                        paginationPreText: '<<',//指定分页条中上一页按钮的图标或文字,这里是<
                        paginationNextText: '>>',//指定分页条中下一页按钮的图标或文字,这里是>
                //      singleSelect: false,//设置True 将禁止多选
                        search: true, //显示搜索框
                        //data_local: "zh-US",//表格汉化
                        sidePagination: "client", //服务端处理分页
                        queryParams: queryParams,//将返回的值赋值给table插件的属性
                        responseHandler:function(res){
                            return{
                                "total":res.total,
                                "rows": res.rows,
                            }
                        },
                        idField: "uuid",//指定主键列
                        columns: [{
                                    field:'uuid',
                                    title:'单据号'
                                },{
                                    field:'username',
                                    title:'贡献者'
                                },{
                                    field:'fl',
                                    title:'类别'
                                },{
                                    field:'need_name',
                                    title:'名称'
                                },{
                                    field:'country',
                                    title:'国家'
                                },{
                                    field:'rqq',
                                    title:'日期起'
                                },{
                                    field:'rqz',
                                    title:'日期止'
                                },{
                                    field:'lrrq',
                                    title:'贡献日期'
                                },{
                                    field:'spjg',
                                    title:'审批状态'
                                },{
                                    field:'spyj',
                                    title:'审批意见'
                                },{
                                    field:'spsj',
                                    title:'审批时间'
                                },{
                                    title: '操作',          
                                    align: 'center',
                                    formatter: function (value, records, index) {
                                        let html= ''
                                        if (records.spjg =='00'){
                                          html = '<a href=javascript:comfirbyid(' + '"'+records.uuid+ '"' + ') class="btn btn-success btn-sm" >审核</a> '
                                        }
                                        return html
                                      }
                                  }
                                ]
                    });
                };

        //分页查询参数，是以键值对的形式设置的
        function queryParams(params) {
            params.fl= $('#fl').val();// 请求时向服务端传递的参数
            params.spjg =$('#spjg')?$('#spjg').val():'00';
            params.rqq=$('#rqq').val()?$('#rqq').val():'2020-1-1';
            params.rqz =$('#rqz').val()?$('#rqz').val():'2099-1-1';
            return  params
        }

        // 搜索按钮触发事件
        $("#query_data").click(function() {
              $('#table').bootstrapTable(('refresh')); // 很重要的一步，刷新url！
        });


//修改提交
     $('#btn_update').click(function(){
              let spjg = $('input:radio[name=optionsRadiosinline]:checked').val();
              let spyj = $('#txt_spyj').val()
              let djbh = $('#djbh').val()

              if(spjg == 'N' && spyj == ''){
                alert('审批意见不能为空！')
                return 
              }
              let list = {
                'spjg'  : spjg,
                'spyj'  : spyj,
                'uuid': djbh
               }
         
                 $.ajax({
                  //请求方式
                      type : "POST",
                      //数据类型
                      dataType: 'json',
                      //请求地址
                      url : "/zlgx_sh",
                      //数据，json字符串
                      data : list,
                      //请求成功
                      success : function(rs) {
                          alert(rs.mes)
                          $('#zlgxModal').modal('hide')
                          $('#djbh').val('')
                          $('#txt_spyj').val('')
                          $('#table').bootstrapTable(('refresh'));
                      },
                      //请求失败，包含具体的错误信息
                      error : function(e){
                          alert(e)
                      }
                  });

          });
//获取资料并打开模态框
     function comfirbyid(uuid){
        $.ajax({
                  //请求方式
            type : "GET",
            //数据类型
            dataType: 'json',
            //请求地址
            url : "/zlgx_sh",
            //数据，json字符串
            data : {'uuid':uuid},
            //请求成功
            success : function(rs) {
                $('#modal_img').html('<img src=\'static/tmp_img/'+rs[0].uuid+'.jpg\' class="img-responsive img-rounded" height="auto">')
                $('#djbh').val(uuid)
                $('#modal_xxxx').html(rs[0].xxxx)
                $('#modal_intro').html(rs[0].intro)
                $('#zlgxModal').modal('show')
            },
            //请求失败，包含具体的错误信息
            error : function(e){
                alert(e)
            }
        });

     }

</script>




